<template>
  <view class="nli-detail readOnlyNot">
    <view class="nli-detail-title">
      <u-form-item label="标题">
        <u-input
          v-model="form.title"
          type="textarea"
          :auto-height="true"
          placeholder="请输入标题"
          :maxlength="30"
        />
      </u-form-item>
    </view>
    <view class="nli-detail-selectFL">
      <u-form-item label="分类">
        <u-input
          placeholder="请选择分类"
          v-model="classificationSelect.current.label"
          type="select"
          @click="classificationSelect.show = true"
        />
      </u-form-item>
    </view>
    <piaoyiEditor
      v-if="mode !== 'edit' || form.content"
      class="customHtml"
      :values="form.content"
      :maxlength="20000"
      @changes="saveContens"
    />
    <view v-if="mode !== 'edit' || form.content" class="nli-detail-tools">
      <text v-if="form.content.length">{{ form.content.length }}/20000</text>
      <u-button type="default" size="medium" @click="quitEdit"> 取消 </u-button>
      <u-button type="primary" size="medium" @click="save"> 保存 </u-button>
    </view>
    <DfbPopSelect
      v-model:show="classificationSelect.show"
      :list="classificationSelect.list"
      :defaultValue="classificationSelect.current.value"
      @confirm="selectTagConfirm"
    ></DfbPopSelect>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import piaoyiEditor from "@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue";
import DfbPopSelect from "@/components/dfb-pop-select/index.vue";

const form = reactive({
  title: "",
  content: "",
  classification_id: "",
  _id: "",
});

const mode = ref("add");
const loading = ref(false);

const getNoteDetail = async (id) => {
  const res = await vk.callFunction({
    url: "client/note/kh/getNoteDetail",
    data: { _id: id },
  });
  Object.assign(form, res.data);
  const classificationRes = classificationSelect.list.find(
    (item) => item.value === form.classification_id
  );
  if (classificationRes) {
    classificationSelect.current = classificationRes;
    form.classification_id = classificationRes.value;
  } else {
    form.classification_id = "";
  }
};

onLoad((options) => {
  if (options.id) {
    mode.value = "edit";
    nextTick(() => getNoteDetail(options.id));
  }
  if (options.classification_id) {
    form.classification_id = options.classification_id;
    classificationSelect.current = classificationSelect.list.find(
      (item) => item.value === options.classification_id
    );
  }
  uni.setNavigationBarTitle({
    title: mode.value === "edit" ? "编辑笔记" : "新增笔记",
  });
});

const saveContens = (e) => {
  form.content = e.html;
};

const save = async () => {
  if (!form.title) return uni.vk.toast("请输入标题");
  if (!form.classification_id) return uni.vk.toast("请选择分类");
  if (!form.content) return uni.vk.toast("请输入内容");

  try {
    loading.value = true;
    const apiUrl =
      mode.value === "edit"
        ? "client/note/kh/editNote"
        : "client/note/kh/addNote";

    await vk.callFunction({
      url: apiUrl,
      data:
        mode.value === "edit"
          ? { ...form }
          : {
              title: form.title,
              content: form.content,
              classification_id: form.classification_id,
            },
    });

    uni.vk.toast(`${mode.value === "edit" ? "编辑" : "新增"}成功`);
    uni.$emit("refreshNoteList");
    uni.$emit("refreshNoteDetail");
    uni.vk.navigateBack();
  } finally {
    loading.value = false;
  }
};

// 分类选择逻辑
const classificationSelect = reactive({
  show: false,
  current: { label: "", value: "" },
  list: uni.vk.getVuexStore().getters["baseData/note"].map((item) => ({
    label: item.name,
    value: item._id,
  })),
});

const selectTagConfirm = (selectedData) => {
  classificationSelect.current = selectedData;
  form.classification_id = selectedData.value;
};

// 退出编辑模式
const quitEdit = () => {
  uni.vk.confirm("确定放弃编辑吗？", "提示").then((res) => {
    if (res.confirm) {
      uni.vk.navigateBack();
    }
  });
};
</script>

<style lang="scss" scoped>
.readOnlyNot {
  .nli-detail-title {
    font-size: 1em;
    font-weight: normal;
    padding: 0px 15px;
    margin-top: -5px;

    :deep(.u-input__textarea) {
      min-height: unset !important;
      font-size: 1em;
      padding: 0;
    }
  }

  .nli-detail-selectFL {
    display: block;
    padding: 0px 15px;
    margin-bottom: 10px;
  }

  .nli-detail-tools {
    display: block;
    text-align: center;
    margin-top: 15px;
    position: relative;
    & > text {
      position: absolute;
      bottom: calc(100% + 1em);
      right: 20px;
      color: $u-tips-color;
    }
    .u-btn {
      margin: 0 5px;
    }
  }
}

:deep(.container-editor) {
  .ql-container {
    height: calc(100vh - 23rem);
    overflow-y: auto;
    line-height: 2;
    padding: 0 5px;
    font-size: unset;
  }

  .toolbar {
    margin-bottom: 5px;
    color: $u-content-color;
  }
}
</style>
